<template>
  <div>
    nowplaying
    <ul>
      <li
        v-for="data in datalist"
        :key="data.channelid"
        @click="handleClick(data)"
      >
        {{ data.name }}
        <img :src="data.thumb" />
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      datalist: ["1111", "2222", "3333"]
    };
  },

  //卖座网按照教程来操作但是报错了。
  asyncData() {
    return axios({
      url: "https://api.apiopen.top/musicBroadcasting"
    }).then(res => {
      console.log(res.data.result[0].channellist);
      return {
        datalist: res.data.result[0].channellist
      };
    });
  },

  //那么，就用另外一种方法，porxy方式拿猫眼的数据
  //首先需要安装:cnpm install --save @nuxtjs/proxy

  // asyncData({ params }) {
  //   console.log(params);
  //   return axios({
  //     url:
  //       "ajax/comingList?ci=42&token=&limit=10&optimus_uuid=77E2BEE05D3511EAAFA21D005D6E6769EF06C68F5B6F4895B642BDE321FFE9DB&optimus_risk_level=71&optimus_code=10"
  //   }).then(res => {
  //     console.log(res.data);
  //     return {
  //       datalist: res.data.coming
  //     };
  //   });
  // },
  methods: {
    handleClick(id) {
      this.$router.push(`/detail/${id}`);
    }
  }
};
</script>

<style lang="scss" scoped>
li {
  list-style: none;
  img {
    width: 100%;
    height: 300px;
  }
}
</style>
